<template>
  <div class="comment-box">
    <h2>评论框</h2>
    <textarea v-model="comment" placeholder="请输入评论"></textarea>
    <button @click="submitComment">提交</button>
  </div>
</template>

<script setup>import { ref } from 'vue';

const comment = ref('');

const emit = defineEmits(['submit']);

const submitComment = () => {
  if (comment.value.trim()) {
    emit('submit', comment.value);
    comment.value = ''; // 清空输入框
  }
};
</script>

<style scoped>.comment-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}

.comment-box textarea {
  width: 100%;
  height: 100px;
  margin-bottom: 10px;
}

.comment-box button {
  padding: 5px 10px;
}
</style>